import React, { Component } from 'react';
import styles from  './index.module.css'
import Item from './components/item'
import axios from 'axios'
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      msg:"hello react",
      music:[]
    }
  }
  
  render() {
    const Musics = this.state.music.map(item => {
      return (
        <div key={item.id}><Item run={this.run} data={item}></Item></div>
      )
    })
    return (
      <div className={styles.container}>
         {Musics}
      </div>
    );
  }
  run(id){
    console.log(id);
  }
  componentDidMount(){
    axios.get("http://122.112.161.135:3000/top/playlist?cat=%E5%8D%8E%E8%AF%AD").then(res=>{
      this.setState({
        music:res.data.playlists
      })
    })

  }
}
export default App;


